<template>
  <div>
    <div class="my_divider mtw"></div>
    <van-cell-group inset>
      <van-field
        v-model="data.text"
        label="商品名"
        placeholder="请输入商品名称"
      />

      <van-field
        v-model=" data.items[0].text"
        label="商品类型"
        is-link=""
        readonly=""
        @click="type_show = true"
      />

      <van-field
        v-model="data.digit"
        label="规格"
        placeholder="实例: 1000g | ±10g"
      />

      <van-field
        v-model="data.number"
        label="商品价格"
        placeholder="请输入商品价格"
      />

      <van-cell
        title="选择单个日期"
        :value="date"
        @click="date_show = true"
        is-link
      />
      <van-calendar v-model:show="date_show" @confirm="onConfirm" />

      <van-field
        v-model="data.password"
        placeholder="请输入保质期(天数)"
        label="保质期"
      />

      <van-field
        v-model="data.password"
        placeholder="请输入商品描述"
        label="商品描述"
      />
      <van-field name="uploader" label="封面">
        <template #input>
          <van-uploader v-model="data.photo" :after-read="methods.afterRead" />
        </template>
      </van-field>
    </van-cell-group>

    <!-- 新增商品 商品类型弹框 start -->
    <van-action-sheet v-model:show="type_show">
      <div class="content">
        <span class="weight">请选择商品类型</span>

        <div class="xian"></div>
        <van-tree-select
          style="
            display: block;
            --van-sidebar-selected-border-height: 0px;
            --van-sidebar-selected-font-weight: 600;
            --van-font-bold: 500;
          "
          v-model:active-id="activeId"
          v-model:main-active-index="activeIndex"
          :items="data.items"
          @click-item="() => methods.selectType()"
        />

        <!-- <div class="" style="margin-top: 50px">
          <van-button
            block
            type="primary"
            @click="() => methods.replenish(111)"
          >
            确定</van-button
          >
        </div> -->
      </div>
    </van-action-sheet>
    <div class="my_divider"></div>
    <div style="width: 100%; margin-top: 30px">
      <van-button block style="width: 97%; margin: auto" type="primary"
        >新增</van-button
      >
    </div>
    <!-- 新增商品 商品类型弹框 end -->
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
const date = ref(""); //日期属性
const date_show = ref(false); //日期弹框
const type_show = ref(false); //商品类型
const activeId = ref(1); //类型选择框选中右边的数据id
const activeIndex = ref(0); //类型选择框选中左边的数据id
const data = reactive({
  name: "添加商品",
  tel: "",
  text: "",
  digit: "",
  status: 1,
  number: "",
  password: "",
  photo: [],
   items : [
  {
    text: "请选择",
    children: [
      { text: "杭州", id: 1 },
      { text: "温州", id: 2 },
      
    ],
  },
]
});
// const items = [
//   {
//     text: "请选择",
//     children: [
//       { text: "杭州", id: 1 },
//       { text: "温州", id: 2 },
//     ],
//   },
// ];
const formatDate = (date) =>
  `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
const onConfirm = (value) => {
  date_show.value = false;
  date.value = formatDate(value);
};

const methods = {
  selectType: () => {
    type_show.value=false;
    data.items[0].text=data.items[0].children[activeId.value-1].text;
  },
  /**
   * 上传照片事件
   */
  afterRead: (file) => {
    // 此时可以自行将文件上传至服务器
    console.log(file);
  },
};
</script>

<style  scoped>
/* 补货弹出框样式 */
.content {
  padding: 16px 16px 200px;
}

.xian {
  width: 40px;
  height: 3px;
  /* border: 1px solid #000; */
  border-radius: 2px;
  background: #1989fa;
  position: relative;
  top: 45px !important;
  left: 14px;
  z-index: 9999999999999999;
}

.van-ellipsis.van-tree-select__item {
  font-weight: 500 !important;
}
</style>